<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="">
        用户名： <input type="text" name="" id="username"> <span></span>

        <br>
        <input type="file" name="" id="headimg"><span></span>

        <br>

        <input type="submit" value="注册" id="reg">
    </form>
    <script>
        let regBtn = document.querySelector("#reg");

        regBtn.onclick = function (evt) {
            console.log('11');
            evt.preventDefault();
            if (isUsername) {
                console.log('可以注册');
            } else {
                console.log('不可以注册--');

            }
        }

        // 
        let isUsername = false;//记录 用户名输入框的 状态是否正确，默认是false
        let usernameIpt = document.querySelector('#username');
        usernameIpt.onblur = function () {
            let username = usernameIpt.value;
            let reg = /^[a-zA-Z0-9]{3,30}$/;
            if (reg.test(username)) {
                this.nextElementSibling.innerHTML = '格式正确'
                this.nextElementSibling.style.color = 'green'
                isUsername = true;
            } else {
                this.nextElementSibling.innerHTML = '格式错误'
                this.nextElementSibling.style.color = 'red'

                isUsername = false;

            }
        }

        let headimg = document.querySelector('#headimg');
        headimg.onchange = function () {
            console.log(this.value);
            // 
        }

        // 密码强度  -- 字母 --数字  特殊符号
        // 中  有两种
        // 弱 单一的一种 弱的
        // 强  有三种
        // 大小写都有

        function getPwdLevel(str) {
            // 
            let level = 0;
            let r1 = /\d+/;//包含数字
            let r2 = /[a-z]+/;//包含字母 
            let r3 = /[^a-zA-Z0-9]+/;//包含特殊符号 
            if (r1.test(str)) {
                level++
            }
            if (r2.test(str)) {
                level++
            }
            if (r3.test(str)) {
                level++
            }


            // 返回一个数字 1 弱  2 中   3强
            return level
        }



        function isPwd(str) {
            let level = getPwdLevel(str);
            // level  ==3 并且有大写
            if (level == 3 && /[A-Z]+/.test(str)) {
                return true
            } else {
                return false
            }
        }

    </script>

</body>

</html>